<!DOCTYPE html>
<html lang="en">
<head>
  <base href="/">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>宠物智能识别系统</title>
  <link rel="stylesheet" href="static/index/css/index.css">
  <link rel="shortcut icon" href="static/icon_img/tubiao.ico"/>
  <link rel="bookmark" href="dist/img/favicon.ico"/>
  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome -->
  <!-- static/ -->
  <link rel="stylesheet" href="static/index/css/all.min.css">
  <!-- fullCalendar -->
  <link rel="stylesheet" href="static/index/css/main.css">
  <!-- Theme style -->
<!--  <link rel="stylesheet" href="static/public/bootstrap/css/bootstrap.min.css"> -->
  <link rel="stylesheet" href="static/index/css/adminlte.css">
  <link rel="stylesheet" href="static/index/css/index.css">
  <link rel="stylesheet" href="static/index/css/query01.css">
  <link rel="stylesheet" href="static/users/css/modal.css">
  <link rel="stylesheet" href="static/users/css/img_modal.css">
  <link rel="stylesheet" href="static/admin/css/admin_showdownbox.css">
	    <script src="static/public/jquery/jquery.min.js"></script>
<style>
	.col-md-9{
		border: rgba(100,100, 100, 0.2) solid 1px;
		border-radius: 3%;
	}
	.mybtn{
		color: aliceblue;
		border-radius:5px;
		background-color: rgba(0, 127, 203, 1.0);
		border: 1px solid rgb(0, 145, 214);
	}  
	.coninput{
		width: 70%;
		border: 1px solid rgba(0, 30, 225, 0.2);
		border-radius: 5px;
	/* 	background-color: ; */
	}
</style>
</head>
<body class="hold-transition sidebar-mini">
	
	        <input type="hidden" value="{{msg}}" id="altermsg">    
	          
<div class="wrapper">
  <!-- Navbar -->
  <nav class="main-header navbar navbar-expand navbar-white navbar-light">
    <!-- Left navbar links -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
      </li>
      <li class="nav-item d-none d-sm-inline-block">
        {% if request.args.get('name') == None %}
        <a href="login?page=querypagemsg" class="nav-link">登录
        </a>
        {% else %}
        <a href="/">退回首页</a>  
        {% endif %}
        </a>
      </li>
    </ul>
	&nbsp;&nbsp;&nbsp;
{% include 'speak_template.html' %}
 {% include 'users/msgPoint_template.html' %}
    <!-- Right navbar links -->
    <ul class="navbar-nav ml-auto">
      <!-- Navbar Search -->
      <li class="nav-item">
        <a class="nav-link" data-widget="navbar-search" href="#" role="button">
          <i class="fas fa-search"></i>
        </a>
      </li>

      <!-- Messages Dropdown Menu -->
      <li class="nav-item dropdown">
        <a class="nav-link" data-toggle="dropdown" href="#">
          <i class="far fa-comments"></i>
          <span class="badge badge-danger navbar-badge"></span>
        </a>
      </li>
      <!-- Notifications Dropdown Menu -->
      <li class="nav-item dropdown">
        <a class="nav-link" data-toggle="dropdown" href="#">
          <i class="far fa-bell"></i>
          <span class="badge badge-warning navbar-badge"></span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-widget="fullscreen" href="#" role="button">
          <i class="fas fa-expand-arrows-alt"></i>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
          <i class="fas fa-th-large"></i>
        </a>
      </li>
    </ul>
  </nav>
  <!-- /.navbar -->

  <!-- Main Sidebar Container -->
  <aside class="main-sidebar  index-gradient elevation-4">
    <!-- Brand Logo -->
    <a href="/?name={{name}}" class="brand-link">
      <img src="static/icon_img/tubiao.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
           style="opacity: .8">
      <span class="brand-text font-weight-light">宠物智能识别系统</span>
    </a>

    <!-- Sidebar -->
    <div class="sidebar">
      <!-- Sidebar user panel (optional) -->
      <div class="user-panel mt-3 pb-3 mb-3 d-flex">
        {% if name== None %}
        <div class="image">
          <img src="http://127.0.0.1:5001/showprofileimg={{name}}" class="img-circle elevation-2" alt="User Image">
        </div>
        <div class="info">
          <a href="login" class="d-block">未登录</a>
        </div>
        {% endif %}
        {% if name!= None %}
        <div class="image">
          <img src="http://127.0.0.1:5001/showprofileimg={{name}}" class="img-circle elevation-2" alt="User Image">
        </div>
        <div class="info">
          <a href="userCenter?name={{name}}" class="d-block">{{name}}</a>
        </div>
        {% endif %}
      </div>
 

      <!-- Sidebar Menu -->
      <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
          <!-- Add icons to the links using the .nav-icon class
               with font-awesome or any other icon font library -->
          <li class="nav-header">基础服务</li>
          <li class="nav-item">
            <a href="querypagemsg?name={{name}}" class="nav-link">
              <i class="nav-icon fas fa-search"></i>
              <p class="index-font">
                宠物信息查询
              </p>
            </a>
          </li>
          <li class="nav-item">
            <a href="identify?name={{name}}" class="nav-link">
              <i class="nav-icon far fa-image"></i>
              <p class="index-font"> 宠物图片识别
              </p>
            </a>
          </li>
          <li class="nav-item">
            <a href="user_com?name={{name}}" class="nav-link">
              <i class="nav-icon fas fa-columns"></i>
              <p class="index-font">
                圈友交流
              </p>
            </a>
          </li>
        </ul>
      </nav>
      <!-- /.sidebar-menu -->
    </div>
    <!-- /.sidebar -->
  </aside>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>个人中心</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="/">主页</a></li>
              <li class="breadcrumb-item active">个人中心</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>
    <section class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-3">
            <!-- Profile Image -->
            <div class="card card-primary card-outline">
              <div class="card-body box-profile">
                <div class="text-center">
          <button data-modal-action="openu" data-modal-target="myModalu" class="img-btn" id="profileclick">
			  <img class="profile-user-img img-fluid img-circle"
			               src="/showprofileimg={{name}}"
			               alt="User profile picture">
		  </button>   
		  <!-- 关于更换用户头像的模态框-->
		  <div id="myModalu" class="modalu">
		      <div class="modal-contentu modal-normalu">
		          <span class="closeu">&times;</span>
		          <h3>更换头像</h3>
				<form action="/changuserimg/{{name}}" enctype="multipart/form-data" method="POST">
		                   <div class="btn btn-default btn-file" id="addpicu">
		                        <i class="fas fa-paperclip"></i> 添加图片
		                         <input type="file" onchange="showImgu(this)" name="userimg" id="userimg">
		                </div>
						<div class="btn btn-default btn-file">
						<!-- 调出摄像头的按钮 -->
					<button type="button" class='profilepic' style="background:rgba(0, 0, 0, 0.0);border:1px solid rgba(0, 0, 0, 0.0);">摄像头拍照</button>
						</div>
		                     <p class="help-block">不超过:20MB</p>  
		         			<div id="imgContaineru" style="margin-top: 10px;"></div>
							 <button type="submit" class="btn btn-success">更换</button>
							   <button type="reset" class="btn btn-success" onclick="clearprofile()">重置</button>
						<!-- 点击摄像头拍照后调出画布 -->
						<script>
							 function clickpic(){	$("button[id='profileclick']").click();
							}
							
								
							var profilepic=document.querySelector('.profilepic');
							// var profile_user_img = document.querySelector('#profileclick');
						// profilepic.addEventListener('click',function(event){
						// 		location.href="userCenter?flag=1";
								
								
						// 	});
						profilepic.onclick=function(){
							location.href="userCenter?flag=1";
							
						}
						{% if request.args.get('flag') == '1' %}
								window.onload = function(){
									 clickpic()
									 }
									 $("#addpicu").css("display","none");
								{% endif %}
								
			{% if request.args.get('flag') == '0' %}
					window.onload = function(){
						 clickpic()
						 }
					{% endif %}
						</script>
						{% if request.args.get('flag') == '1' %}
						<h2 align="center">用户头像收集</h2>
						<div align="center">
						
							<!-- <button onclick="takepicloginpic()"> 立即登录</button> -->
							<video  src="" id="video1" width="400" height="400" autoplay="autoplay" style="display: block;margin: auto;"></video>
							<button type="button" class="btn btn-success" onclick="takepic()">拍照</button>
							<button type="button" class="btn btn-success stoptakepic" onclick="stoptakepic()">停止</button>
							<canvas id="canvas1" width="400" height="400" style="display: block;margin: auto;"></canvas>
						<script>
							var video1 = document.getElementById("video1")
							var canvas1 = document.getElementById("canvas1")
							var context = canvas1.getContext("2d") //得到画布
							var con={
								audio:false,
								video:true,
								video:{
									width:400,
									height:400
								}
							}
							try{
								navigator.mediaDevices.getUserMedia(con).then(function(stream){
								  try{
									video1.src=window.URL.createObjectURL(stream)
								  }catch(e){
									video1.srcObject=stream
								  }
								})
							} catch(e){//有异常另外方式
								navigator.webkitGetUserMedia({video:true},function(stream){
									video1.src = window.webkitURL.createObjectURL(stream);
								
								},function(error){
									alert(error);
								})
							}
							//拍照
							function takepic(){
							var profiletakepic=	context.drawImage(video1,0,0,400,400);
							canvas1.toBlob(function(blob){
							//拍照相处的预览效果
							var reader = new FileReader()
							reader.readAsDataURL(blob)
							reader.onload = function(e){
								$("#changeimg").prop("src",e.target.result)
							}
							//加入到上传的文域中
							let file = new File([blob],'photo.png',{type:"image/png"})
							const dataTransfer = new DataTransfer();
							dataTransfer.items.add(file)
							document.getElementById("userimg").files = dataTransfer.files
							})
							}
				
						function takepicloginpic(){
						takepic();
						// loginpic();
						
						}
						// setInterval('takepicloginpic()',3000);
						function stoptakepic(){
						location.href='userCenter?flag=0';
						
						}
						
						
						</script>
						</div>
						{% endif %}
						
						
				</form>
		      </div>
		  </div><!--模态框 更换头像-->
                </div><!-- text-center -->

                <h3 class="profile-username text-center">{{name}}</h3>
                {% if name!= 'admin' %}
                <p class="text-muted text-center">普通用户</p>
              {% else %}
               
               <p class="text-muted text-center">管理员 </p>
			  <p align="center"> <a href="/admin_pet?name=admin">后台管理</a></p>
                {% endif %}
        
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->

            <!-- About Me Box -->
            <div class="card card-primary">
              <div class="card-header">
                <h3 class="card-title">个人信息</h3>
              </div>
              <!-- /.card-header -->
              <div class="card-body">
                <strong><i class="fas fa-book mr-1"></i> 职业</strong>

                <p class="text-muted">
                  {{data[3]}}
                </p>

                <hr>

                <strong><i class="fas fa-map-marker-alt mr-1"></i> 所在地</strong>

                <p class="text-muted">{{data[1]}}</p>

                <hr>

                <strong><i class="fas fa-pencil-alt mr-1"></i> 简介</strong>

                <p class="text-muted">{{data[5]}}</p>

                <hr>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </div>
          <!-- /.col -->
          <div class="col-md-9">
            <div class="carduser">
              <div class="card-header p-2">
                <ul class="nav nav-pills">
                  <li class="nav-item"><a class="nav-link first"  data-toggle="tab" id="ltitle1">我的说说</a></li>
                  <li class="nav-item"><a class="nav-link second"  data-toggle="tab" id="ltitle2">修改信息</a></li>
				  
                </ul>
              </div><!-- /.card-header -->
			  <div class="card-body">
			    <div class="tab-content">
			       <div class="page tab-pane" id="page01" style="display: block">
	<!-- 说说部分 2023-10-30 -->
<button data-modal-action="open" data-modal-target="myModal" class="mybtn">新加说说</button>
<!-- 模态框部分 新加-->
<div id="myModal" class="modal">
        <div class="modal-content modal-normal">
            <span class="close">&times;</span>
            <h3 align="center">新加说说</h3>
           <form class="form-horizontal" method="post" action="/addcontext?name={{name}}" enctype="multipart/form-data">
   <input type="hidden" value="{{name}}" name="uname">
               <div class="form-group row">
                 <label for="inputExperience" class="col-sm-2 col-form-label">说说内容</label>
                 <div class="col-sm-10">
                   <textarea class="form-control" id="inputExperience" name="context" placeholder="请在这边写说说"></textarea>
                 </div>		
               </div>

               <div class="form-group row">
				     <div class="form-group">
				                     <div class="btn btn-default btn-file">
				                       <i class="fas fa-paperclip"></i> 添加附件
				                       <input type="file" onchange="showImg(this)" name="attachment">
				                     </div>
				                     <p class="help-block">不超过:20MB</p>
				                   </div>
						   <div id="imgContainer" style="margin-top: 10px;"></div>
                 <div class="offset-sm-2 col-sm-10">
                   <button type="submit" class="btn btn-success">添加</button>
				  <button type="reset" class="btn btn-success" onclick="clearadd()">重置</button>
                 </div>
               </div>
			   <!-- 新加，头像说说的js-->
			   <script type="text/javascript">
				   //新加说说有关的
			     function showImg(obj) {
			       var files = obj.files
			       document.getElementById("imgContainer").innerHTML = getImgsByUrl(files)
			       // getImgsByFileReader(document.getElementById("imgContainer"), files)
			     }
				 
				 
				 //新加说说
			     function getImgsByUrl(files) {
			       var elements = ''
			       for (var i = 0; i < files.length; i++) {
			         var url = window.URL.createObjectURL(files[i])
			         elements += "<img src='" + url + "' style='width: 40%; height: 40%;' class='addimg'/>"
			       }
			       return elements
			     }
				 
				 // 更换头像有关的
				 function showImgu(obj) {
				   var files = obj.files
				   document.getElementById("imgContaineru").innerHTML = getImgsByUrlu(files)
				   // getImgsByFileReader(document.getElementById("imgContainer"), files)
				 }
				   // 使用window.URL.createObjectURL(file)读取file实例并显示图片
				   
				 //修改头像有关的
				 function getImgsByUrlu(files) {
				   var elements = ''
				   for (var i = 0; i < files.length; i++) {
				     var url = window.URL.createObjectURL(files[i])
				     elements += "<img src='" + url + "' style='width: 40%; height: 40%;' id='changeimg'/>"
				   }
				   return elements
				 }
				 
				 //清除修改图片
				 function clearadd(){
					 var addimg = document.getElementsByClassName('addimg')
					 addimg.item(addimg).remove();
				 }
				 
				 //清除更换_上传的头像
				 function clearprofile(){
					try {var img = document.getElementById('changeimg')
				 					 img.remove(); 
						
					} catch (error) {
						console.log(error)
					}
				 					 
									 try {
										var canvas1 = document.getElementById("canvas1")
							// var context = canvas1.getContext("2d") //得到画布
							canvas1.remove();
										// $('#canvas1').css('display','none');
									 } catch (error) {
										console.log(error)
									 }
									
				 }
			   </script>
             </form>	
			
        </div>
    </div><!-- 新加模态框部分 -->
{% for c in clist %}
	<div class="post">
	<!-- <input type="hidden" value="{{c.cid}}"> -->
	                      <div class="user-block">
	                        <img class="img-circle img-bordered-sm" src="http://127.0.0.1:5001/showprofileimg={{name}}" alt="user image">
	                        <span class="username">
	                          <a href="/userCenter?name={{c.uname}}">{{name}}</a>
							  
	      <a href="/delcontext/{{c.cid}}/{{c.conimg}}" class="float-right btn-tool" onclick="return confirm('你确定删除吗？')"><i class="fas fa-times"></i></a><!-- 跟删除有关的 -->
	<button data-modal-action="open{{c.cid}}" data-modal-target="myModal{{c.cid}}" class="mybtn" id="edit_msg{{c.cid}}" onclick="getbasicimg{{c.cid}}()">编辑说说</button>
	                        </span>
	                        <span class="description">发布于 - {{c.contime}} </span>
	                      </div>
	                      <!-- /.user-block -->
	                      <p>
	                       {{c.context}}
	                      </p>
				
						  {% if c.conimg != None %}
	                    <p>
							<img src="static/images/context/{{c.conimg}}" alt="没有提供图片" height="200px" width="400px">
						</p>
						{% endif %}
	                      <p>
	                        <a href="#" class="link-black text-sm mr-2"><i class="fas fa-share mr-1"></i> 分享</a>
	                        <a href="/userCenter?name={{name}}" class="link-black text-sm"><i class="far fa-thumbs-up mr-1"></i> 点赞</a>
	                        <span class="float-right">
	                          <a href="#" class="link-black text-sm">
	                            <i class="far fa-comments mr-1"></i> 评论
	                          </a>
	                        </span>
	                      </p>
	
	                     <form action="/addcommentcenter?name={{name}}" method="POST">
	                     							  <input type="hidden" name='commet_cid' value="{{c.cid}}">
	                     							  <input type="hidden" name='commentname' value="{{name}}">
	                     <p><input class="coninput" type="text" placeholder="输入评论" name="comment" required>
	                     						  <button type="submit" class="mybtn" >发送</button>
	                      </p>
	                     						</form>
							<p> <!-- 用户评论部分 -->
														{% set commentel =  c.cid | querysomec %}
														{% if commentel != [] %}
														{% for ci in commentel %}
														
											<label for="">{{ci.commitname}}:</label>	{{ci.comment}} 
							{% if name==ci.commitname %} <a href="/delcommentcenter/{{ci.id}}" class="float-right btn-tool" onclick="return confirm('你确定删除吗？')"><i class="fas fa-times"></i></a><!-- 跟删除有关的 -->
														{% endif %}
														<br>
														{% endfor %}
														{% endif %}
													</p>					
		<script>
			$(document).ready(function() {  
			    $('.coninput').on('click', function() {  
			     $(this).css('border-color', 'skyblue'); /* 设置输入框边框颜色为蓝色 */  
					 // $(this).off('mouseenter mouseleave'); // 移除鼠标进入和离开的事件监听器  
					 //        $(this).css('border-color', 'deepskyblue'); // 清除边框颜色  
			    });  
				 $('.coninput').on('mouseleave', function() {  
				        $(this).css('border-color', 'deepskyblue'); /* 恢复默认边框颜色 */  
				    });  
			});  
				
			
		</script>										
												
	                    </div>		
		<!-- 模态框部分 修改 -->
		<!-- 模态框部分 -->
	<style>
		/*模态框主体样式*/
		  .modal{{c.cid}} {
			
		      display: none;
		      position: fixed;
		      z-index: 1;
		      left: 0;
		      top: 0;
		      width: 100%;
		      height: 100%;
		      overflow: auto;
		      background-color: rgba(0, 0, 0, 0.5);
		  }
		
		  /*模态框公共样式*/
		  .modal-content{{c.cid}} {
						border-radius: 10px;	
		      background-color: #fefefe;
		      margin: 50px auto 0;
		      padding: 20px;
		      border: 1px solid #888;
		      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
		      animation: modal-show 0.3s;
		  }
		
		  /* 正常大小 */
		  .modal-normal{{c.cid}} {
		      width: 600px;
		  }
		
		
		  /* 隐藏 */
		  .modal-hide{{c.cid}} {
		      animation: modal-hide{{c.cid}} 0.3s;
		  }
		
		  /* 展示动画 */
		  @keyframes modal-show{{c.cid}} {
		      from {
		          opacity: 0;
		          transform: translateY(-50px);
		      }
		      to {
		          opacity: 1;
		          transform: translateY(0);
		      }
		  }
		
		  /* 隐藏动画 */
		  @keyframes modal-hide{{c.cid}} {
		      from {
		          opacity: 1;
		          transform: translateY(0);
		      }
		      to {
		          opacity: 0;
		          transform: translateY(-50px);
		      }
		  }
		
		  /*关闭按钮*/
		  .close{{c.cid}}{
		      color: #aaa;
		      float: right;
		      font-size: 28px;
		      font-weight: bold;
		      cursor: pointer;
		      -webkit-tap-highlight-color: rgba(255,0,0,0);
		  }
		
		  /*关闭按钮的鼠标点击和经过样式*/
		  .close{{c.cid}}:hover,
		  .close{{c.cid}}:focus {
		      color: black;
		      text-decoration: none;
		      cursor: pointer;
		      -webkit-tap-highlight-color: rgba(255,0,0,0);
		  }
	</style>
		<div id="myModal{{c.cid}}" class="modal{{c.cid}}">
		        <div class="modal-content{{c.cid}} modal-normal{{c.cid}}">
		            <span class="close{{c.cid}}">&times;</span>
		            <h3 align="center">修改说说</h3>
		           <form class="form-horizontal" method="post" action="/editcontext?name={{name}}" enctype="multipart/form-data">
		   <input type="hidden" value="{{c.cid}}" name="conid">
		               <div class="form-group row">
		                 <label for="inputExperience" class="col-sm-2 col-form-label">说说内容</label>
		                 <div class="col-sm-10">
		                   <textarea class="form-control" id="edit_context{{c.cid}}" name="edit_context" value="{{c.context}}"></textarea>
							<script>
								$('#edit_msg{{c.cid}}').click(function(){
									$('#edit_context{{c.cid}}').val('{{c.context}}')
								})
								
							</script>
		                 </div>		
		               </div>
		
		               <div class="form-group row">
						     <div class="form-group">
						                     <div class="btn btn-default btn-file">
						                       <i class="fas fa-paperclip"></i> 更改图片
						                       <input name="alterfile{{c.cid}}" type="file" onchange="showImg{{c.cid}}(this)" id='alterfile{{c.cid}}'>
						                     </div>
						                     <p class="help-block">不超过:20MB</p>
						                   </div>
						<!-- <div class="imgshow{{c.cid}}"><img width="30%" src="static/images/context/{{c.conimg}}" alt="未提供图片" style="display: block;" id="imgshow{{c.cid}}">
						</div> -->
								   <div id="imgContainer{{c.cid}}" style="margin-top: 10px;"></div>
		                 <div class="offset-sm-2 col-sm-10">
		                   <button type="submit" class="btn btn-success btn{{c.cid}}">修改</button>
						     <button type="reset" class="btn btn-success" onclick="clearimg{{c.cid}}()">重置</button>
		                 </div>
		               </div>
					   <script type="text/javascript">
						   // function imghidden{{c.cid}}(){
						   // 	document.querySelectorAll('.imgshow{{c.cid}}').forEach(el=>{
						   // 	el.style.display='none'
						   // 	})
						   	
						   // }	
							function getbasicimg{{c.cid}}(){
								
								var alterfile{{c.cid}}=document.getElementById('alterfile{{c.cid}}');
										var url = 'static/images/context/{{c.conimg}}'					
										document.getElementById("imgContainer{{c.cid}}").innerHTML = "<img src='" + url + "' style='width: 40%;' id='alter{{c.cid}}'/>"
										//var alter{{c.cid}} = document.getElementById('alter{{c.cid}}')
										// console.log(typeof(alter{{c.cid}}.src))
										
								/*	let fileimg = new File(['basicimg'],'原图',{
										type:"image/png",
									},);*/
									// let fileList = new FileList();
									// fileList.push(fileimg);
									// console.log(fileimg);
									//alterfile{{c.cid}}.files[0] = fileimg
										
							}	 
							// getbasicimg{{c.cid}}()
								 
					     function showImg{{c.cid}}(obj){
					       var files = obj.files
						   //console.log(files)
					       document.getElementById("imgContainer{{c.cid}}").innerHTML = getImgsByUrl{{c.cid}}(files)
						// imghidden{{c.cid}}()
					       // getImgsByFileReader(document.getElementById("imgContainer"), files)
					     }
					   
					     // 使用window.URL.createObjectURL(file)读取file实例并显示图片
					     function getImgsByUrl{{c.cid}}(files) {
							 // console.log(files)
					       var elements = ''
					       for (var i = 0; i < files.length; i++) {
					         var url = window.URL.createObjectURL(files[i])
					         elements += "<img src='" + url + "' style='width: 40%;' id='alter{{c.cid}}'/>"
					       }
					       return elements
					     }
						 //重置图片
						 function clearimg{{c.cid}}(){
							 try{var file=document.getElementById('alter{{c.cid}}');
							file.remove();
							 }catch(e){
							 	//TODO handle the exception
							 }

						 }
					   </script>
		             </form>	
					
		        </div>
				<script>
					// 获取触发模态框的自定义属性 2
					       var modalButtons{{c.cid}} = document.querySelectorAll("[data-modal-action]");
					
					       // 获取模态框主体
					       var modals{{c.cid}} = document.querySelectorAll(".modal{{c.cid}}");
					
					       // 监听模态框的按钮事件
					       modalButtons{{c.cid}}.forEach(function(button) {
					           button.addEventListener("click", function() {
					               var targetId = this.dataset.modalTarget;
					               var targetModal = document.getElementById(targetId);
					
					               if (targetModal) {
					                   var action = this.dataset.modalAction;
					
					                   if (action === "open{{c.cid}}") {
											// console.log("有执行open")
					                       openModal{{c.cid}}(targetModal);
					                   } else if (action === "close{{c.cid}}") {
											// console.log("有执行close")
										
					                       closeModal{{c.cid}}(targetModal);
					                   }
					               }
					           });
					       });
						 //   function basicimgshow{{c.cid}}(){
						 //   	document.querySelectorAll('.imgshow{{c.cid}}').forEach(el=>{
						 //   	el.style.display='block'
						 //   	})
							// }
							//打开模态框的时候,如果出现之前更换的图片,让它消失,以下是有关函数
							//  function alterimg_disapear{{c.cid}}(){
							// 	 var alter{{c.cid}} = document.querySelectorAll('#alter{{c.cid}}')
							// 	 alter{{c.cid}}.forEach(el=>{
						 //   	el.style.display='none'
						 //   	})
							// }
							
					       // 打开模态框
					       function openModal{{c.cid}}(modal) {
							   //打开模态框的时候,如果出现之前更换的图片,让它消失
							   // alterimg_disapear{{c.cid}}()
							   
					           modal.style.display = "block";
					           modal.querySelector(".modal-content{{c.cid}}").classList.remove("modal-hide{{c.cid}}");
							   // basicimgshow{{c.cid}}()
					       }
					       // 关闭模态框
					       function closeModal{{c.cid}}(modal) {
					           modal.querySelector(".modal-content{{c.cid}}").classList.add("modal-hide{{c.cid}}");
					           modal.querySelector(".modal-content{{c.cid}}").addEventListener("animationend", function () {
					               modal.style.display = "none";
					           }, { once: true });
					       }
					       // 监听模态框的关闭时事件
					       modals{{c.cid}}.forEach(function(modal) {
					           var closeButton = modal.querySelector(".close{{c.cid}}");
					           if (closeButton) {
					               closeButton.addEventListener("click", function() {
					                   var targetModal = this.closest(".modal{{c.cid}}");
					                   closeModal{{c.cid}}(targetModal);
					               });
					           }
					       });
						   
					       // 当用户点击模态框外部时，关闭模态框
					
					//        window.onclick = function(event){
					// 		   console.log('点击了')
					//            modals{{c.cid}}.forEach(function(modal) {
					//                if (event.target === modal) {
					// 				   // console.log('执行了')
					//                    closeModal{{c.cid}}(modal);
					//                }
					//            });
					//        };
						
						  window.addEventListener('click', function(event) {
						       modals{{c.cid}}.forEach(function(modal) {
						           if (event.target === modal) {
						               closeModal{{c.cid}}(modal);
						           }
						       });
						     });
						  
				</script>
				<!-- 传输图片部分 -->
				<!-- <script>
				
					var asd=$('.alterfile{{c.cid}}').val();
						// console.log(asd)
				</script> -->
		    </div><!-- 模态框部分 -->
		{% endfor%}	
			       </div><!-- page01 -->
				   <div class="page tab-pane" id="page02" style="display: none">
                  <form class="form-horizontal" action="/updateusermsg?name={{name}}" method="post">
                      <div class="form-group row">
						  <input type="hidden" name="getname" value="{{data[0]}}">
                        <label for="inputName" class="col-sm-2 col-form-label">用户名</label>
                        <div class="col-sm-10">
                          <input type="text" class="form-control" id="inputName" name="uname" value="{{data[0]}}">
                        </div>
                      </div>
					  <div class="form-group row">
					  						  <input type="hidden" name="getname" value="{{data[0]}}">
					    <label for="inputName" class="col-sm-2 col-form-label">更改密码</label>
					    <div class="col-sm-10">
					      <input type="password" class="form-control" id="password" name="upassword" placeholder="请输入更改密码,不填默认为原密码">
					    </div>
					  </div>
                      <div class="form-group row">
                        <label for="inputEmail" class="col-sm-2 col-form-label">邮箱</label>
                        <div class="col-sm-10">
                          <input type="email" class="form-control" id="inputEmail" name="address"  placeholder="暂未填写" value="{{data[2]}}" >
                        </div>
                      </div>
                      <div class="form-group row">
                        <label for="inputName2" class="col-sm-2 col-form-label">地址</label>
                        <div class="col-sm-10">
                          <input type="text" class="form-control" id="inputName2" name="liveaddress" value="{{data[1]}}">
                        </div>
                      </div>
                      <div class="form-group row">
                        <label for="inputName2" class="col-sm-2 col-form-label">职业</label>
                        <div class="col-sm-10">
                          <input type="text" class="form-control" id="inputName3" name="career" value="{{data[3]}}">
                        </div>
                      </div>
                      <div class="form-group row">
                        <label for="inputSkills" class="col-sm-2 col-form-label">联系电话</label>
                        <div class="col-sm-10">
                          <input type="text" class="form-control" id="inputSkills" name="tel"  value="{{data[4]}}">
                        </div>
                      </div>
                      <div class="form-group row">
                        <label for="inputExperience" class="col-sm-2 col-form-label">个人简介</label>
                        <div class="col-sm-10">
                          <textarea class="form-control" id="usermsg" name="usermsg"></textarea>
                        </div>
						<script>
							$('#usermsg').val('{{data[5]}}')
						</script>
			
                      </div>

                      <div class="form-group row">
                        <div class="offset-sm-2 col-sm-10">
                          <div class="checkbox">
                            <label>
                              <input type="checkbox"> 我同意 <a href="#">用户社区管理条例</a>
                            </label>
                          </div>
                        </div>
                      </div>
                      <div class="form-group row">
                        <div class="offset-sm-2 col-sm-10">
                          <button type="submit" class="btn btn-success">保存修改</button>
                        </div>
                      </div>
                    </form>				   				   
				   					   
				   </div>
				   
				   
			    </div>
			  </div>
           <script>
	let lis=document.querySelectorAll('.nav-link');
			let page01=document.getElementById('page01');
			let page02=document.getElementById('page02');
			
			let ltitle1=document.getElementById('ltitle1');
			let ltitle2=document.getElementById('ltitle2');
			
			//console.log(lis);
			for(let i=0;i<lis.length;i++){
				lis[i].onclick=function(event){
					if( event.target.classList.contains('first')){
						changePage()
						page01.style.display='block'
						ltitle1.style.borderBottom='orangered 4px solid'
						ltitle2.style.borderBottom='none'
					
					}else{
						changePage()
						page02.style.display='block'
						ltitle2.style.borderBottom='orangered 4px solid'
						ltitle1.style.borderBottom='none'
					
					}
					
				}
				
			}
			
			function changePage(){
				document.querySelectorAll('.page').forEach(el=>{
				el.style.display='none'
				})
				
			}		   
		   </script>
		
		   <script>
			   // function showmsg(){
				  //  var altermsg = document.getElementById('altermsg').value;
				   			
				  //  if(altermsg=='修改成功'){
				  //  confirm(altermsg);
				  //  }else if(altermsg == '新加说说成功'){
					 //    confirm(altermsg);
				  //  }else if(altermsg == '删除成功'){
					 //     confirm(altermsg);
					 //  location.href="/userCenter?name={{name}}"
				  //  }else if(altermsg=='修改说说成功'){
					 //   confirm(altermsg);
				  //  }else if(altermsg=='头像修改成功'){
					 //   confirm(altermsg);
					 //    location.href="/userCenter?name={{name}}"
				  //  }
			   // }
			   // function clear(){
				 	// document.getElementById('altermsg').value = ''  
			   // }
			   // showmsg()
			   // 	setInterval('clear()',1000);
		   </script>
            <!-- /.card -->
          </div>
          <!-- /.col -->
        </div>
        <!-- /.row -->
      </div><!-- /.container-fluid -->
    </section>
  </div><!-- /.content-wrapper -->
  <!-- Control Sidebar -->
  <aside class="control-sidebar index-gradient">
    <!-- Control sidebar content goes here -->
  </aside>
  <!-- /.control-sidebar -->
</div><!-- ./wrapper -->
<script src="static/users/js/img_modal.js"></script>
 <script src="static/users/js/modal.js"></script>
  <!-- jQuery -->

  <!-- Bootstrap -->
  <script src="static/public/bootstrap/js/bootstrap.bundle.min.js"></script>
  <!-- jQuery UI -->
  <script src="static/public/jquery/jquery-ui.min.js"></script>
   <script src="static/public/bootstrap/js/bootstrap.min.js"></script>
  <!-- AdminLTE App -->
  <script src="static/index/js/adminlte.js"></script>
  <!-- fullCalendar 2.2.5 -->
  <script src="static/index/js/moment.min.js"></script>
  <script src="static/index/js/main.js"></script>
  <!-- AdminLTE for demo purposes -->
  <!-- Page specific script -->
  


</body>
</html>